<template>
  <div id="div1">
    <p><span>管理员信息</span></p>
    <hr />
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      border
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="登录账号" prop="login" label-width>
        <el-input v-model="ruleForm.login"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password">
        <el-input v-model="ruleForm.password1"></el-input>
      </el-form-item>
    </el-form>
    <p><span>权限配置</span></p>
    <hr />
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      border
      style="width: 90% height: 70%"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#f7f7f7' }"
    >
      <el-table-column type="selection" width="100"> </el-table-column>
      <el-table-column prop="salt" label="角色名称" width="200">
      </el-table-column>
      <el-table-column prop="Roledes" label="角色说明"> </el-table-column>
      <el-table-column label="操作" width="350">
        <template>
          <el-button type="text" size="medium" @click="get3" width="350"
            >查看权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div id="div3">
      <el-button @click="preservation">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      ruleForm: {
        login: "",
        name: "",
        password: "",
        password1:"",
      },
      rules: {
        login: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            pattern: /^[a-zA-z]\w{3,15}$/,
            message: "账号必须为4-16位字母、数字、下划线组成，字母开头",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]{1,6}$/,
            message: "请输入正确的名字",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-zA-z]\w{3,15}$/,
            message:
              "密码必须为长度6-12位；开头为首字母大写；只能由字母、数字或特殊字符$~!组成",
            trigger: "blur",
          },
        ],
      },
      tableData: [
        {
          salt: "角色1",
          Roledes:
            "角色1拥有管理职称申报审批、专技人员注册以及查看专技人员信息",
        },
        {
          salt: "角色2",
          Roledes:
            "角色2拥有管理专技人员迁入、专技人员迁出以及查看专技人员信息",
        },
      ],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    get3() {
      this.isShow = !this.isShow;
      this.$router.push("/Company/Getpermissions");
    },

    preservation() {
      this.$axios({
        url: "/admin/add",
        method: "post",
        data: {
          login: this.ruleForm.login,
          name: this.ruleForm.name,
          password: this.ruleForm.password,
          salt:this.tableData.salt,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 500) {
          this.$message.error("添加失败！");
        } else {
          this.$message.success("添加成功！");
          //保存添加并返回角色管理页面
          // this.$router.push({ path: "Rolemanagement", name: "Rolemanagement" });
        }
      });
    },
    //取消
    cancel() {
      this.$router.push({ path: "Rolemanagement", name: "Rolemanagement" });
    },
  },
  mounted() {
    sessionStorage.setItem("fName", "GetRolemanagement");
  },
};
</script>
<style lang="less" scoped>
#div1 {
  width: 90%;
  height: 100%;
  background: #f7f7f7;
  hr {
    width: 95%;
    margin: auto;
  }
  p {
    height: 34px;
    span {
      margin-left: 50px;
      line-height: 34px;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      color: rgb(153, 153, 153);
    }
  }

  .el-form {
    width: 450px;
  }
  .el-form-item {
    margin-top: 20px;
  }
  .el-table {
    margin: 20px auto;
    line-height: 34px;
  }
}
#div3 {
  width: 1000px;
  text-align: center;
}
</style>